<template>
  <div class="header">
    <a-dropdown>
      <span class="ant-dropdown-link">
        <a-icon type="global" />
      </span>
      <a-menu
        slot="overlay"
        @click="localeChange"
        :selectedKeys="[$route.query.locale || 'zhCN']"
      >
        <a-menu-item key="zhCN">
          <a href="javascript:;">中文</a>
        </a-menu-item>
        <a-menu-item key="enUS">
          <a href="javascript:;">English</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <span class="logout">
      <a-icon type="logout" />
    </span>
    <page-header
      v-if="!$route.meta.hiddenHeaderContent"
      :title="pageTitle"
      :logo="logo"
      :avatar="avatar"
    >
      <slot slot="action" name="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && description">
        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
        <div class="link">
          <template v-for="(link, index) in linkList">
            <a :key="index" :href="link.href">
              <a-icon :type="link.icon" />
              <span>{{ link.title }}</span>
            </a>
          </template>
        </div>
      </div>
      <slot slot="extra" name="extra">
        <div class="extra-img">
          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage" />
        </div>
      </slot>
      <div slot="pageMenu">
        <div class="page-menu-search" v-if="search">
          <a-input-search
            style="width: 80%; max-width: 522px;"
            placeholder="请输入..."
            size="large"
            enterButton="搜索"
          />
        </div>
        <div class="page-menu-tabs" v-if="tabs && tabs.items">
          <!-- @change="callback" :activeKey="activeKey" -->
          <a-tabs
            :tabBarStyle="{ margin: 0 }"
            :activeKey="tabs.active()"
            @change="tabs.callback"
          >
            <a-tab-pane
              v-for="item in tabs.items"
              :tab="item.title"
              :key="item.key"
            ></a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </page-header>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
  name: "",
  methods: {
    localeChange({ key }) {
      this.$router.push({ query: { ...this.$route.query, locale: key } });
      this.$i18n.locale = key;
    }
  },
  components: {
    PageHeader
  }
};
</script>
<style lang="less" scoped>
.header {
  height: 140px;
  float: right;
  margin-right: 139px;
  .logout {
    margin: 0 20px;
  }
}
</style>
